<template>
  <el-dialog
    v-model="dialogVisible"
    title="比赛详情"
    width="800px"
    :before-close="handleClose"
  >
    <div v-if="matchData" class="match-detail">
      <!-- 基本信息 -->
      <el-card class="mb-4" shadow="never">
        <template #header>
          <span class="font-medium">基本信息</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="label">比赛时间：</span>
              <span>{{ formatDateTime(matchData.matchTime) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">联赛：</span>
              <span>{{ matchData.leagueName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">主队：</span>
              <span>{{ matchData.homeTeam }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">客队：</span>
              <span>{{ matchData.awayTeam }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">外部ID：</span>
              <span>{{ matchData.externalId }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="label">创建时间：</span>
              <span>{{ formatDateTime(matchData.createdAt) }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 投注信息 -->
      <el-card shadow="never">
        <template #header>
          <span class="font-medium">投注信息</span>
        </template>
        <el-table
          :data="matchData.bettings"
          style="width: 100%"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <el-table-column prop="beidanNumber" label="北单编号" width="100" />
          <el-table-column prop="beidanHandicap" label="北单让球" width="100" />
          <el-table-column prop="winOdds" label="胜赔率" width="80" />
          <el-table-column prop="drawOdds" label="平赔率" width="80">
            <template #default="{ row }">
              {{ row.drawOdds || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="loseOdds" label="负赔率" width="80" />
          <el-table-column prop="jingcaiNumber" label="竞彩编号" width="100">
            <template #default="{ row }">
              {{ row.jingcaiNumber || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="jingcaiHandicap" label="竞彩让球" width="100">
            <template #default="{ row }">
              {{ row.jingcaiHandicap || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" min-width="160">
            <template #default="{ row }">
              {{ formatDateTime(row.createdAt) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { type MatchData } from "@/api/matches";
import { formatDateTime } from "@/utils/formatTime";

interface Props {
  visible: boolean;
  matchData: MatchData | null;
}

interface Emits {
  (e: "update:visible", value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const dialogVisible = computed({
  get: () => props.visible,
  set: value => emit("update:visible", value)
});

const handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.match-detail {
  .info-item {
    margin-bottom: 12px;

    .label {
      font-weight: 500;
      color: var(--el-text-color-regular);
    }
  }
}

.mb-4 {
  margin-bottom: 16px;
}
</style>
